<template>
  <template v-if="!item.children">
    <el-menu-item :index="item.path">
      <el-icon>
        <component :is="item.meta?.icon || 'Menu'" />
      </el-icon>
      <template #title>{{ item.meta?.title }}</template>
    </el-menu-item>
  </template>

  <el-sub-menu v-else :index="item.path">
    <template #title>
      <el-icon>
        <component :is="item.meta?.icon || 'Menu'" />
      </el-icon>
      <span>{{ item.meta?.title }}</span>
    </template>
    <sidebar-item
      v-for="child in item.children"
      :key="child.path"
      :item="child"
    />
  </el-sub-menu>
</template>

<script setup lang="ts">
import type { PropType } from "vue";
import type { RouteRecordRaw } from "vue-router";

defineProps({
  item: {
    type: Object as PropType<RouteRecordRaw>,
    required: true,
  },
});
</script>

<style scoped>

</style>
